import React, { Component } from 'react'
import { connect } from 'dva';
import { Row, Col, Form, Icon, Input, Button } from 'antd';
import styles from './common.css'

class Login extends Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            this.props.dispatch({
                type: 'userinfo/postLogin',
                payload:{
                    data:values,
                    method:'POST'
                }
            })
          }
        });
      };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Row type="flex" justify="center" align="middle" className={styles.container}>
                    <Col span={24} className={styles.loginBg}></Col>
                    <Col span={14} className={styles.formMain}>
                        <Row type="flex">
                            <Col span={14} className={styles.formImg}></Col>
                            <Col span={10} className={styles.formPost}>
                                <div className={styles.logo}>
                                    <Icon type="usergroup-delete" style={{fontSize:'2em'}} />
                                </div>
                                <p className={styles.title}>后台管理系统</p>
                                <Form onSubmit={this.handleSubmit} className="login-form">
                                    <Form.Item>
                                        {getFieldDecorator('username', {
                                            rules: [{ required: true, message: 'Please input your username!' }],
                                        })(
                                            <Input
                                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                                placeholder="Username"
                                            />,
                                        )}
                                    </Form.Item>
                                    <Form.Item>
                                        {getFieldDecorator('password', {
                                            rules: [{ required: true, message: 'Please input your Password!' }],
                                        })(
                                            <Input
                                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                                type="password"
                                                placeholder="Password"
                                            />,
                                        )}
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit" block>
                                            登录
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}

const mapStateToProps = state =>{
    return{
        userinfo:state.userinfo
    }
}

Login = Form.create({ name: 'login' })(Login);

export default connect(mapStateToProps)(Login);